<template>
  <div class="webService">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="this.$t('config.channel.webCustomerServiceSet')" name="webOnlineService">
        </el-tab-pane>
        <el-tab-pane
                :label="this.$t('config.channel.webchatDayManage')"
                name="dayManage"
                :manageType="manageType"></el-tab-pane>
        <el-tab-pane
                v-if="this.$store.state.session.user.type === 'admin' && this.$store.state.session.user.exten === '0000' && flag === 'kf'"
                :label="this.$t('config.channel.webchatDomain')"
                name="domainCustomize"></el-tab-pane>
      </el-tabs>
      <keep-alive>
        <component :is = "activeName"></component>
      </keep-alive>
  </div>
</template>
<script>
  import visitorConfig from './visitorConfig'
  import domainCustomize from './webDomainCustomize/webDomainCust.vue'
  import dayManage from '../base/webchatManage'
  import webOnlineService from './webOnlineServer/webOnlineServer'
  // import configTest from './configTest'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        activeName: 'webOnlineService',
        name: this.$t('configLazyLoad.channel.bredTitle'),
        currentView: 'skillGroupList',
        titleArr: [this.$t('configLazyLoad.channel.bredTitle')],
        accessId: '',
        onlineMessage: {},
        number: 0,
        isAdd: true,
        manageType: 'web'
      }
    },
    components: {
      // onlineMessage,
      // skillGroupList,
      dayManage,
      domainCustomize,
      visitorConfig,
      webOnlineService
      // configTest,
      // breadCrumb
    },
    methods: {
      getWebchatList () {
        this.returnMain()
      },
      handleClick (value) {
        this.name = value.label
      },
      // 控制面包屑的显示字段，传入需要渲染的数据
      edit (obj) {
        this.$store.dispatch('getDicCache', {type: 'mailQueues'}).then((res) => {
          if (res && res.success) {
            if (res.data.length <= 0) {
              this.$message(this.$t('configLazyLoad.channel.robotError4'))
              return
            }
            if (obj) {
              this.titleArr.splice(1, 2, this.$t('configLazyLoad.channel.addDocking'), obj.name)
              this.onlineMessage = obj
            } else {
              this.titleArr.splice(1, 2, this.$t('configLazyLoad.channel.addDocking'))
              this.onlineMessage = {}
              this.isAdd = false
            }
            this.currentView = 'onlineMessage'
          }
        })
      },
      accessCode (accessId, name) {
        this.currentView = 'configDescription'
        this.titleArr.splice(1, 2, this.$t('configLazyLoad.channel.dockingCode'), name)
        this.accessId = accessId
      },
      returnMain () {
        this.currentView = 'skillGroupList'
        this.titleArr = [this.$t('configLazyLoad.channel.bredTitle')]
        this.isAdd = true
        // 为了返回主界面能刷新一下设定的，没有好的其他办法
        this.number = Math.random()
      }
      // test () {
      //   this.currentView = 'configTest'
      //   this.isAdd = false
      //   this.titleArr.splice(1, 2, '测试')
      // }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .webService
    .nav
      padding-left 10px
      height 36px
      line-height 36px
      border-bottom 1px solid $c-border2
      .goback
        cursor pointer
      .goback:hover
        color $c-main
      span
        font-size 14px
      .iconfont
        cursor pointer
        display inline-block
        width 20px
        height 20px
        border-radius 50%
        line-height 22px
        text-align center
        font-size 12px
        color $c-main
        border 1px solid $c-main
        transform rotate(90deg)
        margin-right 6px
</style>
